<!DOCTYPE html>
<html>
<head>
    --<meta name="layout" content="main"/>
    <g:set var="entityName" value="${message(code: 'estate.label', default: 'estate')}"/>
    <title>逾期行为结构分布</title>
</head>
<body class="fixed-navbar fixed-sidebar">
<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li class="active">
                        <span>逾期行为结构分布</span>
                    </li>
                </ol>
            </div>

            <h2 class="font-light m-b-xs">
                %{--<i id="goBack" class="pe-7s-back fa-2x" style="position: absolute; top: 8px;"></i>--}%
               <span>逾期行为结构分布</span>
            </h2>
        </div>
    </div>
</div>

%{--<g:include view="analyze/common.gsp"></g:include>--}%

<div class="content animate-panel">
<div class="row">

    <div class="hpanel hblue">
        <div class="panel-heading">
            <div class="panel-tools">
                <button class="btn btn-primary btn-xs" id="searchData" type="submit" onclick="text()"><i class="fa fa-search"></i>查询</button>
                <button class="btn btn-warning2 btn-xs" type="button" id="resetBtn">
                    <i class="fa fa-times"></i>重置</button>
            </div>
            查询
        </div>

    <div class="panel-body seach-group" id="bug1">
        %{--第一行--}%
        <g:form method="POST" action="searchEstate" class="form-horizontal" role="form">
            <div class="row">
                <div class="form-group col-sm-3">
                    <label for="district" class="col-sm-4 control-label">城市</label>
                    <div class="col-sm-8">
                        <g:select class="form-control" name="city" id="city"
                                  from="${com.cindata.City.executeQuery("select distinct e.city as city from  Estate e ")}"
                                  valueMessagePrefix="status" optionKey="zoneNumber" optionValue="name"
                                  value="${params?.city}"
                                  noSelection="${["-1": '请选择城市']}"/>
                    </div>
                </div>
                <div class="form-group col-sm-5">
                    <label for="district" class="col-sm-3 control-label">贷款金额范围</label>
                    <div class="col-sm-7 input-group ">
                        <input type="text" class=" form-control " placeholder="请输入下限" maxlength="6"
                               id="loansAmountStart" value="${params?.loansAmountStart}" name="loansAmountStart" />
                        <span class="input-group-addon">至</span>
                        <input type="text" class=" form-control " placeholder="请输入上限" maxlength="6"
                               id="loansAmountEnd" value="${params?.loansAmountEnd}" name="loansAmountEnd" />
                    </div>
                    <div class="col-sm-2 p-t-xss">
                        万元
                    </div>
                </div>
                <div class="form-group col-sm-4">
                    <label class="col-sm-3 control-label" >押品风险</label>
                    <div class="col-sm-9">
                        <g:select class="form-control" name="risk" id="risk"
                                  from="${com.cindata.dimension.RiskDimension.list()}"
                                  valueMessagePrefix="status" optionKey="label" optionValue="label"
                                  value="${params?.risk}"
                                  noSelection="${["": '请选择押品风险']}"/>
                    </div>
                </div>

            </div>
        %{--第二行--}%
            <div class="row">
                <div class="form-group col-sm-3">
                    <label for="district" class="col-sm-4 control-label xingzheng">行政区</label>
                    <div class="col-sm-8 district xingzheng"  >
                        <g:select class="form-control" name="city" id="district"
                                  from="${com.cindata.City.executeQuery("select distinct e.city as city from  Estate e")}"
                                  valueMessagePrefix="status" optionKey="zoneNumber" optionValue="name"
                                  value="${params?.city}"
                                  noSelection="${["-1": '请选择城市']}"/>
                    </div>
                </div>
                <div class="form-group col-sm-5">
                    <label for="district" class="col-sm-3 control-label">贷款余额范围</label>
                    <div class="col-sm-7  input-group">
                        <input type="text" class=" form-control "
                               placeholder="请输入下限" id="loansBalanceStart" maxlength="6"
                               value="${params?.loansBalanceStart}" name="loansBalanceStart" />
                        <span class="input-group-addon">至</span>
                        <input type="text" class="form-control " placeholder="请输入上限" maxlength="6"
                               id="loansBalanceEnd"  value="${params?.loansBalanceEnd}" name="loansBalanceEnd" />
                    </div>
                    <div class="col-sm-2 p-t-xss">
                        万元
                    </div>
                </div>
                <div class="form-group col-sm-4">
                    <label for="district" class="col-sm-3 control-label">放款时间</label>
                    <div class="col-sm-9 input-daterange input-group p-r-n"  id="datepicker" style="width: 75%;">
                        <input type="text" class=" form-control " placeholder="请选择放款时间"
                               value="${params?.startDateStart}" name="startDateStart" id="startDateStart" />
                        <span class="input-group-addon">至</span>
                        <input type="text" class=" form-control " placeholder="请选择结束时间"
                               value="${params?.startDateEnd}" name="startDateEnd" id="startDateEnd" />
                    </div>
                </div>

            </div>
        %{--第三行--}%
            <div class="row">
                <div class="form-group col-sm-3">
                    <label class="col-sm-4 control-label" for="noSearch">贷款时长</label>
                    <div class="col-sm-8">
                        <g:select class="form-control" name="loansDuration" id="loansDuration"
                                  from="${com.cindata.dimension.YearLimitDimension.list()}"
                                  valueMessagePrefix="status" optionKey="label" optionValue="label"
                                  value="${params?.loansDuration}"
                                  noSelection="${["": '请选择贷款时长']}"/>
                    </div>
                </div>
                <div class="form-group col-sm-5">
                    <label  class="col-sm-3 control-label">抵押面积范围</label>
                    <div class="col-sm-7  input-group">
                        <input type="text" class=" form-control " placeholder="请输入下限" id="buildAreaStart" maxlength="6"
                               value="${params?.dynamicMortgageRateStart}" name="dynamicMortgageRateStart" />
                        <span class="input-group-addon">至</span>
                        <input type="text" class="form-control " placeholder="请输入上限" id="buildAreaEnd" maxlength="6"
                               value="${params?.dynamicMortgageRateEnd}" name="dynamicMortgageRateEnd" />
                    </div>
                    <div class="col-sm-2 p-t-xss">
                        平米
                    </div>
                </div>
                <div class="form-group col-sm-4">
                    <label for="district" class="col-sm-3 control-label">贷款到期日</label>
                    <div class="col-sm-9 input-daterange input-group p-r-n"  id="datepicker2" style="width: 75%;">
                        <input type="text" class=" form-control " placeholder="请选择贷款时间"
                               value="${params?.startDateStart}" name="startDateStart" id="endDateStart" />
                        <span class="input-group-addon">至</span>
                        <input type="text" class=" form-control " placeholder="请选择贷款时间"
                               value="${params?.startDateEnd}" name="startDateEnd" id="endDateEnd" />
                    </div>
                </div>

                %{--<div class="form-group col-sm-5">--}%
                %{--<label  class="col-sm-3 control-label">动态抵押率范围</label>--}%
                %{--<div class="col-sm-7  input-group">--}%
                %{--<input type="text" class=" form-control " placeholder="请输入下限" id="dynamicMortgageRateStart"--}%
                %{--value="${params?.dynamicMortgageRateStart}" name="dynamicMortgageRateStart" />--}%
                %{--<span class="input-group-addon">至</span>--}%
                %{--<input type="text" class="form-control " placeholder="请输入上限" id="dynamicMortgageRateEnd"--}%
                %{--value="${params?.dynamicMortgageRateEnd}" name="dynamicMortgageRateEnd" />--}%
                %{--</div>--}%
                %{--<div class="col-sm-2">--}%
                %{--%--}%
                %{--</div>--}%
                %{--</div>--}%
            </div>

            </div>
        </g:form>
    </div>
</div>

<div class="row">
    <div class="hpanel hgreen">
        <div class="panel-heading">
            <div class="panel-tools">
                <a class="showhide"><i class="fa fa-chevron-up"></i></a>
            </div>
            逾期行为结构分布
        </div>
        <div class="panel-body">
            <ul id="myTab" class="nav nav-tabs">
                <li id="one" class="active">
                    <a href="" data-toggle="tab"  href="#tab-1" aria-expanded="true">
                        区域
                    </a>
                </li>
                <li id="two"><a href="" data-toggle="tab"  href="#tab-1" aria-expanded="true">初始房贷比</a></li>
                <li id="three">
                    <a href=""  data-toggle="tab"  href="#tab-1" aria-expanded="true">
                        贷款时年龄
                    </a>
                </li>
                <li id="four">
                    <a href=""  data-toggle="tab"  href="#tab-1" aria-expanded="true">
                        还款时间
                    </a> 
                    
                </li>
            </ul>
            <div id="myChart4" style="width: 100%;height: 340px;"></div>
        </div>
    </div>
</div>

<asset:javascript src="echarts/echarts-all-3.js" />

<script>
    window.onload = function () {
        var key = 1;
        var inputData = {
            key : 1
        };

        function initCharts (data,key){
            data.key = key;
            if(key != 1){
                $(".xingzheng").show();
            }else{
                $(".xingzheng").hide();
            }
            $.ajax({
                type: "POST",
                url: "/analyze/overdueActionStructureAnalysisData",
                data:data,
                success: function (msg){
                    var myChart = echarts.init($('#myChart4').get(0));
                    var allData = msg.resultList,
//                        quantity = [],
//                        price = [],
//                        loansBalance = [],
//                        ltvData = [],
//                        subsection = [],
                        counts = [],
                        amounts = [],
                        ynames = [];

                    var result;
                    allData.forEach(function(data,index){
                        console.log(data);
                        counts[index] = data.counts;
                        amounts[index] = data.amounts;
                        ynames[index] = data.ynames;
//                        quantity[index] = data.COUNT;
//                        price[index] = transitiony(data.LOANSAMOUNT);
//                        loansBalance[index] = transitiony(data.LOANSBALANCE);
//                        subsection[index] = data.SUBSECTION;
//                        ltvData[index] = data.ltv;

                    });

//                    function initdata(quantity,subsection){
//                        var listArr =  [];
//                        for(var i = 0; i < quantity.length; i++){
//                            listArr.push({value:quantity[i],name:subsection[i]})
//                        }
//                        return listArr
//                    }

                    option4 = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            },
                            // formatter:'{b0}<br/>逾期笔数：{c0}</br> 逾期金额：{c1} 元</br>'
                            formatter: function(params) {
                                var res = '<div>';
                                res += '<strong>' + params[0].name + '</strong>'
                                for (var i = 0, l = params.length; i < l; i++) {
                                    if (params[i].seriesName == '逾期笔数') {
                                        res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + ' 笔'
                                    }
                                    if (params[i].seriesName == '逾期金额') {
                                        res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + ' 元'
                                    }
                                }
                                res += '</div>';
                                return res;
                            }
                        },
                        title: [],
                        legend: {
                            data:['逾期笔数','逾期金额'],
                            textStyle: {
                                color : "#ADADAD"
                            },
                        },
                        yAxis:  [{
                            type: 'value',
                            name: '逾期笔数',
                            axisLabel: {
                                formatter: '{value}'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#ADADAD',
                                }
                            },
                        },
                            {
                                type: 'value',
                                name: '逾期金额（单位/元）',
                                axisLabel: {
                                    formatter: '{value}'
                                },
                                axisLine:{
                                    lineStyle:{
                                        color:'#ADADAD',
                                    }
                                },
                            }],
                        xAxis: {
                            type: 'category',
                            data:ynames,
                            axisLine:{
                                lineStyle:{
                                    color:'#ADADAD',
                                }
                            },
                         //   data : ['广东','河南','河北','山东']
                        },
                        series: [
                            {
                                name:'逾期笔数',
                                type:'bar',
                                barWidth : 50,//柱图宽度
                                data:counts
                                //data:[5,10,15,20]
                            },
                            {
                                name:'逾期金额',
                                type:'line',
                                yAxisIndex: 1,
                                data:amounts
                                //data:[5,10,15,20]
                            },
                        ]
                    };

//                    if(key==1){
//                        //result = quantity;
////                        option4.series[0].data=initdata(result,subsection);
////                        option4.series[1].data=initdata(result,subsection);
//                    }else if(key==2){
//                        //result = price;
////                        option4.series[0].data=initdata(result,subsection);
////                        option4.series[1].data=initdata(result,subsection);
//                    }else if(key==3){
//                        //result = loansBalance;
////                        option4.series[0].data=initdata(result,subsection);
////                        option4.series[1].data=initdata(result,subsection);
//                    }else if(key==4){
//                        //result = ltvData;
////                        option4.series[0].data=initdata(result,subsection);
////                        option4.series[1].data=initdata(result,subsection);
//                    }
                    myChart.setOption(option4);
                    window.onresize = function () {
                        myChart.resize()
                    };
                    inputData = [];
                }
            })};
        initCharts(inputData,1);
        $('#searchData').click(function(){
            // $('#one').siblings().removeClass('active');
            // $('#one').addClass('active');
            citys = $('#city').val(),
                districts = $('#district').val(),
                loansBalanceStarts = $('#loansBalanceStart').val(),
                loansBalanceEnds =  $('#loansBalanceEnd').val(),
                loansAmountStarts = $('#loansAmountStart').val(),
                loansAmountEnds = $('#loansAmountEnd').val(),
                startDateStarts = $('#startDateStart').val(),
                startDateEnds = $('#startDateEnd').val(),
                loansDurations = $('#loansDuration').val(),
                remainTimes = $('#remainTime').val(),
                risk = $('#risk').val(),
                buildAreaEnds = $('#buildAreaEnd').val(),
                buildAreaStarts = $('#buildAreaStart').val(),
                endDateStarts = $('#endDateStart').val(),
                endDateEnds = $('#endDateEnd').val(),
                inputData = {
                    city:citys,
                    district:districts,
                    loansBalanceStart:loansBalanceStarts,
                    loansBalanceEnd:loansBalanceEnds,
                    loansAmountStart:loansAmountStarts,
                    loansAmountEnd:loansAmountEnds,
                    startDateStart:startDateStarts,
                    startDateEnd:startDateEnds,
                    loansDuration:loansDurations,
                    remainTime:remainTimes,
                    risk:risk,
                    buildAreaEnd:buildAreaEnds,
                    buildAreaStart:buildAreaStarts,
                    endDateStart:endDateStarts,
                    endDateEnd:endDateEnds,
                    key:1
                };
            if($("#one").hasClass("active")){
                initCharts(inputData,1)
            }else if($('#two').hasClass("active")){
                initCharts(inputData,2)
            }else if($('#three').hasClass("active")){
                initCharts(inputData,3)
            }else if($('#four').hasClass("active")){
                initCharts(inputData,4)
            };
        });
        $('#one').click(function(){
            inputData = {
                key:1
            }
            initCharts(inputData,1);
        });
        $('#two').click(function(){
            inputData = {
                key:2
            }
            initCharts(inputData,2);
        });
        $('#three').click(function(){
            inputData = {
                key:3
            }
            initCharts(inputData,3);
        });
        $('#four').click(function(){
            inputData = {
                key:4
            }
            initCharts(inputData,4);
        });

    }
</script>

<script>

    $(function(){
        $('#goBack').click(function(){
            window.history.back(-1);
        })
    })
</script>

<g:javascript>
    $(function () {

        $("#resetBtn").click(function () {
            $("#fullName").val("");
        })

        $('#datepicker').datepicker({
            language: 'zh-CN'
        });
        $('#datepicker2').datepicker({
            language: 'zh-CN'
        });
        $("#datepicker").on("changeDate", function(event) {
            $("#my_hidden_input").val(
                    $("#datepicker").datepicker('getFormattedDate')
            )
        });

        // $('#esateTable').footable();

        $('.input-group.date').datepicker({ });
        $('.input-daterange').datepicker({ });

        $("#city").bind("change", function(){
            $("#district option").remove();
            $("#s2id_district span:first").html("请选择行政区");
            var city = $("#city").val()
            $("#district").append("<option value='-1' >请选择行政区</option>")
            if(city=='-1'){
                return
            }
            $.ajax({
                url: "/estate/districtList",
                type: "POST",
                data: {'city': city} ,
                success: function(result){
                    for(var i=0; i < result.districtList.length; i++){
                        $("#district").append("<option value=" + result.districtList[i].zoneNumber + ">" + result.districtList[i].name + "</option>")
                    }
                }
            });
        });
        $("#city").change();

    });
    //重置按钮
    $("#resetBtn").click(function () {
        $("#s2id_city span:first").html("请选择城市");
        $("#city").val("");
        $("#s2id_district span:first").html("请选择行政区");
        $("#district").val("");
        $("#loansAmountStart").val("");
        $("#loansAmountEnd").val("");
        $("#loansBalanceStart").val("");
        $("#loansBalanceEnd").val("");
        $("#sourceAddress").val("");
        $("#startDateEnd").val("");
        $("#startDateStart").val("");
        $("#s2id_loansDuration span:first").html("请选择贷款时长");
        $("#loansDuration").val("");
        $("#s2id_remainTime span:first").html("请选择剩余还款时长");
        $("#remainTime").val("");
        $("#s2id_risk span:first").html("请选择押品风险");
        $("#risk").val("");
        $("#endDateStart").val("");
        $("#endDateEnd").val("");
        $("#buildAreaStart").val("");
        $("#buildAreaEnd").val("");

    })
</g:javascript>
</body>
</html>
